@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  font-family: "Nunito", sans-serif;
}
html {
  @apply text-gray-700 dark:text-white from-orange-500 to-red-500 overflow-x-hidden;
}
h1,
h2 {
  font-family: "Nunito", sans-serif;
  @apply !font-semibold;
}
@supports (not selector(::-webkit-scrollbar)) {
  .scrollbar-sm {
    scrollbar-width: thin;
    scrollbar-color: #f8fafc #e2e8f0;
  }
}
.scrollbar-sm {
  &::-webkit-scrollbar {
    @apply w-2 h-2 rounded-lg bg-gray-100 dark:bg-gray-800;
  }
  &::-webkit-scrollbar-thumb {
    @apply bg-gray-200 rounded-lg dark:bg-gray-900;
  }
}
@supports (not selector(::-webkit-scrollbar)) {
  .dark {
    .scrollbar-sm {
      scrollbar-color: #0f172a #1e293b;
    }
  }
}

::-webkit-scrollbar {
  @apply w-3 bg-gray-50 dark:bg-gray-800;
}
::-webkit-scrollbar-thumb {
  @apply bg-gray-200 rounded-lg dark:bg-gray-900;
}
.gradient-image-mask {
  mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}
.tilt-lg {
  transform: perspective(100rem) rotate3d(0.5, 0, 0, 30deg);
}
.tilt-md {
  transform: perspective(100rem) rotate3d(0.5, 0, 0, 15deg);
}
.hover\:tilt-none:hover {
  transform: perspective(100rem) rotate3d(0.5, 0, 0, -30deg);
}

.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
  bottom: 3rem;
}
.icon-scroll {
  width: 2rem;
  height: 3.5rem;
  @apply border-2 border-gray-200 dark:border-gray-700 rounded-3xl hidden md:block;
}
.icon-scroll:before {
  content: "";
  width: 8px;
  height: 8px;
  @apply bg-gray-200 dark:bg-gray-700;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll;
}
@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: perspective(100rem) rotate3d(1, -1, 0, 30deg) translateY(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: perspective(100rem) rotate3d(1, -1, 0, 30deg) translateY(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: perspective(100rem) rotate3d(1, -1, 0, 30deg) translateY(0px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(3rem);
  }
}
.astro-code {
  @apply !rounded-2xl !bg-gray-900 !border-gray-700 !border-2;
}
.prose :where(code):not(:where(pre *, .not-prose, .not-prose *)) {
  @apply bg-gray-200 fill-current dark:bg-gray-900 rounded-md px-1 font-mono font-medium py-0.5;
}
.prose :where(code):not(:where(pre *, .not-prose, .not-prose *))::after {
  content: "";
}
.prose :where(code):not(:where(pre *, .not-prose, .not-prose *))::before {
  content: "";
}
.prose :where(img, video):not(:where(.not-prose, .not-prose *)) {
  @apply rounded-2xl;
}
.headline-overlay {
  background: linear-gradient(0deg, rgba(243, 244, 246, 0.4) 80%, transparent);
}
@media (prefers-color-scheme: dark) {
  .headline-overlay {
    background: linear-gradient(0deg, rgba(31, 41, 55, 0.4) 80%, transparent);
  }
}

.grid-background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(#e5e7eb 2px, transparent 0),
    linear-gradient(to right, #e5e7eb 2px, transparent 0);
  background-size: 24px 24px;
  background-position: center center;
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1), transparent 65%);
  animation: uncover 1s ease-out forwards;
}
.grid-background-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(#e5e7eb 2px, transparent 0),
    linear-gradient(to right, #e5e7eb 2px, transparent 0);
  background-size: 24px 24px;
  background-position: center center;
  mask-position: center center;
  mask-repeat: no-repeat;
  z-index: -2;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1), transparent 90%);
  animation: uncover 1s ease-out forwards;
}
.grid-background-3 {
  position: absolute;
  width: 175%;
  height: 120%;
  top: -10%;
  left: -65%;
  background-image: linear-gradient(#e5e7eb 2px, transparent 0),
    linear-gradient(to right, #e5e7eb 2px, transparent 0);
  background-size: 24px 24px;
  background-position: center center;
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1), transparent 75%);
  animation: uncover 1s ease-out forwards;
}

@media (prefers-color-scheme: dark) {
  .grid-background {
    background-image: linear-gradient(#4b5563 2px, transparent 0),
      linear-gradient(to right, #4b5563 2px, transparent 0);
  }
  .grid-background-2 {
    background-image: linear-gradient(#4b5563 2px, transparent 0),
      linear-gradient(to right, #4b5563 2px, transparent 0);
  }
  .grid-background-3 {
    background-image: linear-gradient(#374151 2px, transparent 0),
      linear-gradient(to right, #374151 2px, transparent 0);
  }
}

@keyframes uncover {
  from {
    opacity: 0;
    mask-size: 0% 0%;
  }
  to {
    opacity: 1;
    mask-size: 100% 100%;
  }
}
@keyframes animated-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.animated-gradient {
  background-size: 400% 400%;
  animation: animated-gradient 5s ease infinite;
}

.feature-highlight .atropos-highlight {
  background-image: radial-gradient(circle at 50%, rgb(0, 0, 0, 0.1), transparent 70%) !important;
}

.feature-highlight .atropos-shadow {
  @apply !bg-gray-300;
}
@media (prefers-color-scheme: dark) {
  .feature-highlight .atropos-highlight {
    background-image: radial-gradient(
      circle at 50%,
      rgb(255, 255, 255, 0.1),
      transparent 70%
    ) !important;
  }
  .feature-highlight .atropos-shadow {
    @apply !bg-gray-900;
  }
}

.testimonial-mask {
  mask-position: center center;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 2rem,
    black calc(100% - 2rem),
    transparent
  );
}
@media (min-width: 768px) {
  .testimonial-mask {
    mask-image: linear-gradient(
      to right,
      transparent,
      black 16rem,
      black calc(100% - 16rem),
      transparent
    );
  }
}

.astro-code {
  @apply !rounded-2xl !bg-gray-800 !dark:bg-gray-900 px-4 py-3 leading-6;
}
.astro-code::-webkit-scrollbar {
  @apply w-2 h-4 rounded-b-2xl bg-gray-800 dark:bg-gray-900 border;
}
.astro-code::-webkit-scrollbar-thumb {
  @apply rounded-2xl bg-gray-700 border-4 border-gray-800 dark:border-gray-900 border-solid;
}
.astro-code::-webkit-scrollbar-track {
  @apply mx-2;
}
.prose :where(code):not(:where(pre *, .not-prose, .not-prose *)) {
  @apply bg-gray-200 fill-current dark:bg-gray-900 rounded-md px-1 font-mono font-medium py-0.5 text-wrap;
}
.prose :where(code):not(:where(pre *, .not-prose, .not-prose *))::after {
  content: "";
}
.prose :where(code):not(:where(pre *, .not-prose, .not-prose *))::before {
  content: "";
}
.prose :where(img, video):not(:where(.not-prose, .not-prose *)) {
  @apply rounded-2xl;
}
.prose :where(figcaption) {
  @apply text-center text-gray-500 dark:text-gray-400 text-sm mt-1;
}
.prose img {
  margin-bottom: 1em;
}
